/**
 * 自定义指令
 *    除了内置指令之外，可以自行再注册一些指令来使用
 *
 *    概念：一个包含有类似组件的生命周期钩子选项的一个对象
 *
 *        {
 *          created() {},
 *          beforeMount() {},
 *          mounted() {},
 *          beforeUpdate() {},
 *          updated() {},
 *          beforeUnmount() {},
 *          unmounted() {}
 *        }
 *
 *    使用步骤：
 *      1. 定义指令
 *          1. 完整的对象形式
 *          2. 简写的函数形式
 *            指令的钩子一般用的比较多的就是 mounted 与 updated ，可以直接使用一个函数来表示该两个钩子
 *      2. 注册指令
 *          1. 全局注册
 *             app.directive()
 *          2. 局部注册
 *             directives 选项
 *      3. 使用指令
 *          通过 v- 前缀将指令用在元素上，一般自定义指令只能用在普通元素上。
 *
 *    指令的钩子：主要关注 mounted 与 updated
 *
 *      mounted: 指令所在元素已经子元素挂载完成触发
 *      updated: 指令所再元素的组件发生更新完成时触发
 *
 *    指令的钩子函数的参数：el、binding、vnode、prevNode
 *
 *      el: 指令所在元素的 DOM 对象
 *      binding: 指令的一些信息, 是一个对象，包含有如下的属性
 *        arg: 指令的参数
 *            v-focus:abcd
 *        instance: 指令所在元素的组件的实例对象
 *        modifiers: 指令的修饰符
 *            v-focus:abcd.a.b
 *            {a: true, b: true}
 *        oldValue:  更新时，指令上一次绑定的值
 *        value:     指令的值
 *        {
            arg: 'foo',
            modifiers: { bar: true },
            value: `baz` 的值
            oldValue: 上一次更新时 `baz` 的
          }
 *      vnode:     指令所在元素的 虚拟DOM 对象
 *      prevNode： 指令所在元素的 上一次虚拟DOM 对象
 *
 */

import { createApp } from "vue";
import App from "./App.vue";

// 引入 focus 指令
import focus from "./directives/focus";
import color from "./directives/color";

// 创建应用
const app = createApp(App);

// 注册全局指令
app.directive("focus", focus);
app.directive("color", color);

// 挂载应用
app.mount("#app");
